<template>
  <div id="app">
    <div class="Pc" v-if="isPc">
      <img src="./assets/active.png" alt="">
      <p>扫码参与活动</p>
    </div>
    <div class="Phone" v-else>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import common from "../commonFunction/common"
export default {
  name: 'app',
  components: {},
  data () {
    return {
      isPc: false
    }
  },
  mounted () {
    this.isPc = common.IsPC();
    if(this.isPc) { return false; }
  }
}
</script>

<style lang="scss">
  html {
    font-size: 10vw;
  }
  html, body {
    min-height: 100%;
  }
  #app, .Phone{
    max-width: 750px;
    height: 100%;
  }
  body {
    background: url(./assets/bg.png);
    background-size: 4%;
  }
  @media screen and (min-width: 750px) {
    
    html,body,#app{
      height: 100%;
    }
    body {
      background:#f5f5f5 !important;
      font-size: 14px !important;
      #app {
        width: 100%;max-width: 1200px !important;margin: 0 auto;
        height: 100%;
        .Pc {
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          p {
            text-align: center;
          }
          img {
            width: 200px;
            margin-bottom: 20px;
          }
        }
      }
    }
  }
</style>
